<template>
    <div class="login-container">
        <div class="login-container-left">
            <img src="/img/bg/login-bg.png" />
        </div>
        <div class="login-weaper animated bounceInDown">
            <div class="login-weaper-content">
                <div class="login-logo">
                    <img src="/img/logo.png" alt />
                </div>
                <p class="login-tip">{{ website.infoTitle }} v 1.0</p>
                <div class="login-border">
                    <div class="login-main">
                        <userLogin />
                    </div>
                </div>
            </div>
        </div>
        <div class="login-copyright">Copyright © 2022 {{ url }} All rights reserved.</div>
        <top-color v-show="false" />
    </div>
</template>
<script>
import request from '@/router/axios';
import userLogin from './userlogin';
import codeLogin from './codelogin';
import thirdLogin from './thirdlogin';
import { mapGetters } from 'vuex';
import { getStore, setStore } from '@/util/store';
import topColor from '@/page/index/top/top-color';

export default {
    name: 'Login',
    components: {
        userLogin,
        codeLogin,
        thirdLogin,
        topColor
    },
    data() {
        return {
            tenantList: [],
            active: '',
            activeName: 'user',
            socialForm: {},
            height: 0,
            url: ''
        };
    },
    watch: {
        $route: {
            handler() {
                const params = this.$route.query;
                if (this.validatenull(params.state) && this.validatenull(params.code)) return;

                this.socialForm.state = params.state;
                this.socialForm.code = params.code;

                const loading = this.$loading({
                    lock: true,
                    text: `登录中,请稍后。。。`,
                    spinner: 'el-icon-loading'
                });
                this.$store
                    .dispatch('LoginBySocial', this.socialForm)
                    .then(() => {
                        loading.close();
                        this.$router.push({ path: this.tagWel.value });
                    })
                    .catch(() => {
                        loading.close();
                    });
            },
            immediate: true
        }
    },
    beforeCreate() {
        window.needLogin = false;
    },
    created() {
        this.watermark();
        this.getTenantList();
        this.height = document.body.clientHeight + 'px';
        this.url = process.env.VUE_APP_URL;
    },
    mounted() {},
    computed: {
        ...mapGetters(['website', 'tagWel'])
    },
    methods: {
        handleCommand(command) {
            setStore({ name: 'tenantId', content: command });
        },
        getTenantList() {
            request({
                url: '/admin/tenant/list',
                method: 'get'
            }).then((response) => {
                this.tenantList = response.data.data;
            });
        },
        watermark() {
            const text = '';
            const canvas = document.createElement('canvas');
            canvas.width = '500';
            canvas.height = '200';
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 200, 200); // 绘制之前画布清除
            ctx.font = '30px 黑体';
            ctx.rotate((-20 * Math.PI) / 180); // 为了实现水印倾斜效果,旋转画布坐标系
            ctx.fillStyle = 'rgba(100,100,100,0.15)'; // 画笔颜色
            ctx.fillText(text, -20, 200); // 书写的内容及位置
            ctx.rotate('20*Math.PI/180'); // 坐标系还原,如果后续没有其他操作,这一步可以省略
            // 将canvas的内容转换为base64编码
            const data = canvas.toDataURL('image/png', 1); // 1表示质量(无损压缩)

            window.onload = () => {
                const background = 'url(' + data + ') repeat';
                let watermark = document.createElement('div');
                watermark.style.width = '100%';
                watermark.style.height = '100%';
                watermark.style.position = 'fixed';
                watermark.style.left = '0';
                watermark.style.top = '0';
                watermark.style.pointerEvents = 'none';
                watermark.style.background = background;
                watermark.style.zIndex = '9999';
                document.body.append(watermark);
            };
        }
    }
};
</script>

<style lang="scss">
.login-copyright {
    color: #999;
    width: 100%;
    position: fixed;
    bottom: 30px;
    text-align: center;
}
.login-container {
    background-color: #ffffff;
    display: flex;
    width: 100%;
    height: 100%;
    &-left {
        img {
            height: 100vh;
            max-width: calc(100vw - 400px);
        }
    }
}

.login-tip {
    color: #ed5555;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}
.login-logo {
    overflow: hidden;
    width: 110px;
    height: 110px;
    margin: -50px auto 20px auto;
    border-radius: 50%;
    -webkit-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.07);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.07);
    padding: 10px;
    background-color: #fff;
    z-index: 1;
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    img {
        width: 100%;
    }
}
.login-weaper {
    width: 726px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &-content {
        width: 380px;
    }
}

.login-left,
.login-border {
    padding: 20px 0 40px 0;
    position: relative;
    align-items: center;
    display: flex;
}

.login-left {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    justify-content: center;
    flex-direction: column;
    background-color: #ed5555;
    color: #fff;
    float: left;
    width: 50%;
    position: relative;
}

.login-left .img {
    width: 140px;
}

.login-left .title {
    margin-top: 60px;
    text-align: center;
    color: #fff;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 25px;
}

.login-border {
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #fff;
    background-color: #fff;
    width: 100%;
    float: left;
    box-sizing: border-box;
}

.login-main {
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.login-main > h3 {
    margin-bottom: 20px;
}

.login-main > p {
    color: #76838f;
}

.login-title {
    color: #333;
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 22px;
    text-align: center;
    letter-spacing: 4px;
}

.login-select {
    input {
        color: #333;
        font-size: 14px;
        font-weight: 400;
        border: none;
        text-align: center;
    }
}

.login-menu {
    margin-top: 40px;
    width: 100%;
    text-align: center;

    a {
        color: #ed5555;
        font-weight: 700;
        font-size: 12px;
        margin: 0px 8px;
    }
}

.login-submit {
    width: 100%;
    height: 45px;
    font-size: 18px;
    letter-spacing: 5px;
    text-indent: 5px;
    font-weight: 300;
    font-weight: 600;
    cursor: pointer;
    margin-top: 30px;
    font-family: 'neo';
    transition: 0.25s;
}

.login-form {
    margin: 10px 0;

    i {
        color: #ed5555;
    }

    .el-form-item__content {
        width: 100%;
    }

    .el-form-item {
        margin-bottom: 12px;
    }

    .el-input {
        input {
            padding-bottom: 10px;
            text-indent: 15px;
            background: transparent;
            border: none;
            border-radius: 0;
            color: #333;
            border-bottom: 1px solid rgb(235, 237, 242);
        }

        .el-input__prefix {
            i {
                padding: 0 5px;
                font-weight: 600;
                font-size: 18px !important;
            }
        }
    }
}

.login-code {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 0 0 10px;
}

.login-code-img {
    margin-top: 2px;
    width: 100px;
    height: 38px;
    background-color: #fdfdfd;
    border: 1px solid #f0f0f0;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 5px;
    line-height: 38px;
    text-indent: 5px;
    text-align: center;
}
</style>
